<template>
    <el-card class="count-card">
        <div class="card-content">
            <div class="card-title">题型统计</div>
            <div class="count-item" v-for="(item, index) in countList" :key="index">
                <div class="item-label">{{ item.type }}：</div>
                <div class="item-count">{{ item.count }}个</div>
            </div>
        </div>
        <addItem @success="handleSubmitData" ref="addItemRef" />

        <div class="selectQuesBtGroup">
            <el-button @click="GetType('choose')" type="default" :icon="Check" plain size="mini">选择题</el-button>
            <el-button @click="GetType('multiChoose')" type="default" :icon="CircleCheck" plain
                size="mini">多选题</el-button>
            <el-button @click="GetType('fillBlank')" type="default" :icon="Grid" plain size="mini">填空题</el-button>
            <el-button @click="GetType('combining')" type="default" :icon="HelpFilled" plain size="mini">组合题</el-button>
            <el-button @click="GetType('judge')" type="default" :icon="Finished" plain size="mini">判断题</el-button>
            <el-button @click="GetType('judge')" type="default" :icon="Finished" plain size="mini">判断题</el-button>
        </div>
        <div class="add-btn" @click="addOrEditItem({})">
            <el-button type="primary" style="width: 200px;" size="large" :icon="Plus">添加问题</el-button>
        </div>

    </el-card>
</template>
<script setup>
import {ref,reactive} from 'vue'
const countList = ref([
    { type: '选择题', count: 0 },
    { type: '多选题', count: 1 },
    { type: '填空题', count: 0 },
    { type: '组合题', count: 0 },
    { type: '判断题', count: 0 },
])
//dialog 的添加题目
//dialog 的添加题目
const handleSubmitData = (data) => {
    let newArr = data.options.map(item => item.content)
    data.options = newArr
    data.checked = false

    itemList.value.push(data)
    // 更新 countList 中对应类型题目的数量
    const typeIndex = countList.value.findIndex((item) => item.type === data.type)
    if (typeIndex >= 0) {
        countList.value[typeIndex].count++
    }
    console.log("itemList.value from dialog", itemList.value[0].options);
}


const addOrEditItem = (row) => {
    addItemRef.value.open(row)
}
const GetType = (type) => {
    console.log(' type is', type)
    addItemRef.value.open()
}
</script>

<style scoped>
.count-card {
    width: 350px;
    height: 900px;
    margin-left: 20px;

    .card-content {
        padding: 10px;

        .card-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .count-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;

            .item-label {
                color: #909399;
            }

            .item-count {
                color: #333;
            }
        }


    }

    .selectQuesBtGroup {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        >button {
            margin: 10px;
        }
    }

    .add-btn {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        cursor: pointer;
    }


}
</style>